<template>
  <div class="person">
    <div class="tools">
      <el-input :disabled="loading" v-model="search.name" placeholder="请输入姓名" size="large">
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
      <el-checkbox-group :disabled="loading" v-model="search.type">
        <el-checkbox-button value="1,2,3">
          全&nbsp;部
          <p class="number">({{statistics.leader + statistics.spercial + statistics.other}})</p>
        </el-checkbox-button>
        <el-checkbox-button value="1">
          领&nbsp;导
          <p class="number">({{statistics.leader}})</p>
        </el-checkbox-button>
        <el-checkbox-button value="2">
          特&nbsp;种
          <p class="number">({{statistics.spercial}})</p>
        </el-checkbox-button>
        <el-checkbox-button value="3">
          其&nbsp;他
          <p class="number">({{statistics.other}})</p>
        </el-checkbox-button>
      </el-checkbox-group>
    </div>
    <list
      :list="listData"
      :status="baseSearch.status"
      v-loading="loading"
      @scrollLoad="scrollLoad"
      @showHistoryTrack="showHistoryTrack"
    />
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import list from './list.vue'
import { getPersonList, getPersonTypeCount } from '@/api/person'
import { useListData } from '@/hooks/useListData'
import { onMounted, ref } from 'vue'

const emit = defineEmits(['showHistoryTrack'])

// 定义搜索参数的类型
interface SearchParams {
  name: string
  type: string[]
}

// 使用列表数据 hook
const { search, baseSearch, listData, loading, scrollLoad } = useListData<SearchParams>({
  fetchData: (searchData) => getPersonList({ ...searchData, type: searchData.type.join(',')}),
  initialSearchParams: {
    name: '',
    type: []
  },
  enableAutoRefresh: true,
  refreshInterval: 60000, // 60秒
})

function showHistoryTrack(item) {
  emit('showHistoryTrack', item)
}

const statistics = ref({
  leader: 0,
  spercial: 0,
  other: 0,
})
onMounted(async () => {
  const { data } = await getPersonTypeCount()
  statistics.value = data
})

</script>

<style lang="scss" scoped>
.tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
}

.number{
  margin: 0;
  margin-top: 4px;
  letter-spacing: 1px;
  font-size: 12px;
}
</style>
